<template>
  <div>
    <el-form-item label="提示文字">
      <el-input size="small" v-model="props.config.props.placeholder" placeholder="请设置提示语"/>
    </el-form-item>
    <el-form-item label="数量限制">     
      <el-input-number class="max-fill" controls-position="right" :precision="0" size="small" v-model="props.config.props.maxNumber" placeholder="最多上传几张图片"/>
    </el-form-item>
    <el-form-item label="大小限制">     
      <el-input-number class="max-fill" controls-position="right" :precision="1" size="small" v-model="props.config.props.maxSize" placeholder="单个文件最大大小"/>
    </el-form-item>
    <!-- <el-form-item label="类型限制">    
      <el-select size="small" style="width: 100%;" v-model="props.config.props.fileTypes" multiple
                 filterable allow-create default-first-option clearable placeholder="允许上传文件的后缀格式，可设置多种"/>
    </el-form-item> -->
    <el-form-item label="不可下载">
      <el-switch v-model="props.config.props.onlyRead"></el-switch>
    </el-form-item>
  </div>
</template>

<script setup>
import {  watch,computed } from 'vue'
import FormComponentMixin from "../FormComponentMixin.js"


const props = defineProps({
  ...FormComponentMixin.props
})

const emit = defineEmits([...FormComponentMixin.emits])
const _value = computed(FormComponentMixin.computed._value(props, emit))
// 监听 value 的变化，确保在父组件更新时同步
watch(_value, (newValue) => {
  // 可以在这里处理 value 的变化
}, { deep: true })
</script>

<style lang="less" scoped>
:deep(.el-form-item__label) {
  padding: 0 12px 0 0;
}
</style>